<template>
  <div class="app-container">
    <div class="queryContent">
      <el-form :inline="true" ref="systemLogForm" :model="systemLogForm" label-width="80px">

        <el-form-item label="请求账号">
          <el-input v-model="systemLogForm.loginId" placeholder="请求账号" clearable/>
        </el-form-item>

        <el-form-item label="请求API">
          <el-input v-model="systemLogForm.requestApi" placeholder="请求API" clearable/>
        </el-form-item>

        <el-form-item label="状态码">
          <el-input v-model="systemLogForm.resCode" placeholder="状态码" clearable/>
        </el-form-item>

        <el-form-item label="操作时间">
          <el-date-picker v-model="logTime"
                          type="daterange"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

      </el-form>
    </div>

    <div class="buttonContent">
      <el-form :inline="true" label-width="80px">
        <el-row>
          <el-col style="text-align: right;">
            <el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="onReset" icon="el-icon-refresh-right">重置</el-button>
          </el-col>

        </el-row>
      </el-form>

    </div>

    <div class="tableContent">
      <el-table :data="userList" border style="width: 100%;" :header-cell-style="this.$customUi.grid.title"
                :cell-style="this.$customUi.grid.cell" :style="this.$customUi.grid.style">

        <el-table-column show-overflow-tooltip prop="id" label="日志编号" width="80px"></el-table-column>

        <!--        <el-table-column show-overflow-tooltip prop="systemModule" label="系统模块"></el-table-column>-->

        <el-table-column show-overflow-tooltip prop="creatorIp" label="请求IP"></el-table-column>

        <el-table-column show-overflow-tooltip prop="creatorAddress" label="请求地点"></el-table-column>

        <el-table-column show-overflow-tooltip prop="requestType" label="请求方式" align="center">
          <template slot-scope="scope">
            <el-tag v-if=" scope.row.requestType === 'GET' ">{{scope.row.requestType}}</el-tag>
            <el-tag v-else-if=" scope.row.requestType === 'POST' " type="success">{{scope.row.requestType}}</el-tag>
            <el-tag v-else type="warning">{{scope.row.requestType}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="requestToken" label="请求Token"></el-table-column>

        <el-table-column show-overflow-tooltip prop="requestApi" label="请求接口">
          <template slot-scope="scope">
           <p class="req-api"><span>{{ scope.row.requestApi }}</span></p>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="creator" label="请求账号"></el-table-column>

        <el-table-column show-overflow-tooltip prop="resJson" label="请求返回">
          <template slot-scope="scope">
            <p style="padding-left: 3px;">
              <b @click="viewJson(scope.row.resJson)" v-if="scope.row.resCode == 200" style="color: green;">
                {{scope.row.resCode }} - {{ scope.row.resMsg }}
              </b>
              <b @click="viewJson(scope.row.resJson)" v-else-if="scope.row.resCode == 500 || scope.row.resCode == 501" style="color: red;">
                {{scope.row.resCode }} - {{ scope.row.resMsg }}
              </b>
              <b @click="viewJson(scope.row.resJson)" v-else style="color: blue;">
                {{ scope.row.resCode }} - {{scope.row.resMsg }}
              </b>
            </p>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="startTime" label="请求时间">
          <template slot-scope="scope">
            <p>
              开始：{{ scope.row.startTime}}
            </p>
            <p>
              结束：{{ scope.row.endTime }}
            </p>
            <p>
              <b style="color: green;">耗时：{{ (scope.row.costTime + 0.0) / 1000 }}s</b>
            </p>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <div class="pageContent">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :current-page=systemLogForm.current
        :page-size=systemLogForm.size
        :total=total
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <!--  查看返回内容  -->
    <res_json ref="resJson" @closeDialog="close_dialog"></res_json>
  </div>
</template>

<script>
  import api from '@/api/sysLog'
  import moment from "moment";
  import res_json from './res-json'

  export default {
    name: 'system-log',
    components: {res_json},
    data() {
      return {
        systemLogForm: {
          // 当前页
          current: 1,
          // 每页显示条数
          size: 5,
          systemModule: '',
          loginId: '',
          requestApi: '',
          resCode: '',
          startTime: '',
          endTime: ''
        },
        total: 0,
        userList: [],
        logTime: '',
      }
    },
    created() {
      this.query()
    },
    methods: {
      query(){
        this.systemLogForm.current = 1
        this.onQuery()
      },
      // 查询
      onQuery() {
        var me = this
        if (me.logTime.length > 0) {
          me.systemLogForm.startTime = moment(me.logTime[0]).format('yyyy-MM-DD') + " 00:00:00"
          me.systemLogForm.endTime = moment(me.logTime[1]).format('yyyy-MM-DD') + " 23:59:59"
        }
        api.systemLog(this.systemLogForm).then(response => {
          if (response.status === 200) {
            me.userList = response.data.records
            me.total = response.data.total
          }
        })
      },
      // 重置
      onReset() {
        this.systemLogForm.current = 1
        this.systemLogForm.size = 5
        this.systemLogForm.systemModule = ''
        this.systemLogForm.loginId = ''
        this.systemLogForm.requestApi = ''
        this.systemLogForm.resCode = ''
        this.systemLogForm.startTime = ''
        this.systemLogForm.endTime = ''
        this.logTime = []
        this.onQuery()
      },

      // 分页
      handleSizeChange(val) {
        this.systemLogForm.size = val
        this.onQuery()
      },
      // 分页
      handleCurrentChange(val) {
        this.systemLogForm.current = val
        this.onQuery()
      },
      // 查看参数
      viewJson(json) {
        this.$refs.resJson.open(json)
      },
      // 关闭编辑dialog
      close_dialog() {}
    }
  }
</script>

<style scoped>
  .req-type-box {
    color: #FFF;
  }

  .req-type-box b {
    padding: 3px 7px;
    border-radius: 3px;
    font-size: 12px;
  }

  .req-api span {
    color: #44f;
  }
</style>
